<template>
	<view class="content">
		<cu-custom bgColor="theme-bg-color" :isBack="false">
			<block slot="content">考 勤 </block>
		</cu-custom>
		<SysNoticeBar></SysNoticeBar>
		<BannerSwiper></BannerSwiper>

		<view class="margin-top-lg  flex align-center justify-center">
			<view class='kaoqing' :class="{'kaoqing-disabled': keyword === '未开始' || keyword === '已结束'}" @click="keyword !== '未开始' && keyword !== '已结束' && Check()">{{ keyword }}</view>
		</view>
		<gwbq-calendar :insert="true" :lunar="true" :selected="selectItem" :start-date="'2023-1-1'"
			:end-date="'2025-1-1'" @change="change" />
		<view style="height:120upx"></view>
		<footer-bar :currentIndex="0"></footer-bar>
	</view>

</template>

<script>
	import store from "@/store";
	import BannerSwiper from "@/pages/PageComponents/BannerSwiper.vue"
	import SysNoticeBar from "@/pages/PageComponents/SysNoticeBar.vue"
	import gwbqCalendar from "@/components/gwbq-calendar/gwbq-calendar"

	import {
		mapGetters
	} from "vuex";
	export default {
		computed: {
			...mapGetters([
				'token', 'RoleTypeFormat', "userInfo", "userId"
			])
		},
		components: {
			gwbqCalendar,
			BannerSwiper,
			SysNoticeBar,
		},
		data() {
			return {
				colors: '#fa436a',
				keyword: "考 勤",
				selectItem: [],
				CheckSetting: {}
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.pullCheckSetting();
			setTimeout(()=>{
				this.GetMyCheckList();
			},1500)
		},
		onHide() {

		},
		onUnload() {

		},
		methods: {

			async Check() {
				if (this.$comm.CheckToken()) {
					let {
						Success
					} = await this.$http.PostAsync("/CheckRecord/CheckMyStatus", {
						UserId: this.userInfo.Id
					})
					if (Success) {
						// 判断考勤的类型跳转不通的页面
						if (this.CheckSetting.CheckType == "face") {
							uni.navigateTo({
								url: `/pages/Check/Check?checkSettingId=${this.CheckSetting.Id}`
							})
						} else if(this.CheckSetting.CheckType == "normal") {
							uni.navigateTo({
								url: `/pages/Check/CheckNormal?checkSettingId=${this.CheckSetting.Id}`
							})
						} else if(this.CheckSetting.CheckType == "qrcode") {
							uni.navigateTo({
								url: `/pages/Check/CheckQrcode?checkSettingId=${this.CheckSetting.Id}`
							})
						} else if(this.CheckSetting.CheckType == "hand") {
							uni.navigateTo({
								url: `/pages/Check/CheckHand?checkSettingId=${this.CheckSetting.Id}`
							})
						}
						
					}
				}
			},
			async GetMyCheckList() {
				let {
					Success,
					Data
				} = await this.$http.PostAsync("/CheckRecord/GetCheckList", {
					UserId: this.userInfo.Id
				})
				console.log(Data);
				this.selectItem = Data.map(x => {
					return {
						date: x.date,
						info: x.content
					};
				});
			},
			async pullCheckSetting() {
				let {
					Success,
					Data
				} = await this.$http.PostAsync("/CheckRecord/PullCheckSetting", {
					UserId: this.userInfo.Id,
					OrganizationId: this.userInfo.OrganizationId
				})

				if(Data) {
					this.CheckSetting = Data;
					if(Data.CheckStatus == 1) {
						// 设置文字为已打卡
						this.keyword = "已打卡";
					} else if(Data.CheckStatus == 2){
						this.keyword = "补卡";
						uni.showModal({
							title: "考勤提示",
							content: "考勤时间已结束，请进行补卡",
							showCancel: false,
							confirmText: "我知道了"
						});
					} else {
						// 判断考勤的签到时间
						let start = Data.AmBeginHMS;
						let end = Data.AmEndHMS;
						let now = new Date();
						let currentTime = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0');
						
						if (currentTime >= start && currentTime <= end) {
							this.keyword = "考 勤";
							uni.showModal({
								title: "考勤提示",
								content: "考勤时间已开始，请进行签到",
								showCancel: false,
								confirmText: "我知道了"
							});
						} else if (currentTime < start) {
							this.keyword = "未开始";
							uni.showModal({
								title: "考勤提示",
								content: `考勤时间未到，签到时间为${start}-${end}`,
								showCancel: false,
								confirmText: "我知道了"
							});
						} else {
							this.keyword = "已结束";
							uni.showModal({
								title: "考勤提示",
								content: "今日考勤时间已结束",
								showCancel: false,
								confirmText: "我知道了"
							});
						}
					}
				} else {
					this.keyword = "未开始";
					uni.showModal({
						title: "考勤提示",
						content: "今天无考勤",
						showCancel: false,
						confirmText: "我知道了"
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	/* product */
	page {
		background: #ffffff;
	}

	view {
		font-size: 28upx;
	}

	.my-order-number {
		padding-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #999999;
	}

	.kaoqing {
		width: 300upx;
		height: 300upx;
		border: 2upx solid blue;
		text-align: center;
		font-size: 50upx;
		border-radius: 50%;
		line-height: 300upx;
		color: white;
		background-color: #1d6e99;
		transition: all 0.3s;
	}

	.kaoqing-disabled {
		background-color: #999999;
		border-color: #999999;
		cursor: not-allowed;
		opacity: 0.7;
	}
</style>